<template>
	<view class="check-container" :style="
		{
			width: size + 'px', 
			height: size + 'px', 
			borderColor:color,
			backgroundColor: bgc,
			borderRadius: rounded?'50%' : '3px'
		}"
		@tap="changeValue"
		>
		<view v-show="modelValue">
			<uni-icons  type="checkmarkempty" :color="color" :size="iconSize"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		name:"c-check-box",
		props: {
			modelValue: {
				type: Boolean,
				required: true
			},
			size: {
				type: Number,
				default: 22
			},
			color: {
				type: String,
				 default: '#333'
			},
			bgc: {
				type: String,
				default: "#fff"
			},
			iconSize: {
				type: Number,
				default: 18
			},
			rounded: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			changeValue() {
				this.$emit('update:modelValue', !this.modelValue)
				this.$emit('change', this.modelValue)
			}
		}
	}
</script>

<style lang="scss" scoped>
.check-container{
	border: 1px solid #333;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>